<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="static/assets/global/plugins/jquery-1.11.0.min.js"></script>
    <link href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css"  rel="stylesheet" type="text/css"/>
    <link href="static/assets/global/css/components.css" rel="stylesheet" type="text/css"/>
    <link href="static/assets/admin/pages/css/login.css"  rel="stylesheet" type="text/css"/>
    <title>Document</title>
</head>
<body class="login">
    <div class="content">
        <h3 class="form-title">获取验证码</h3>
        <div class="form-group">
           <label class="control-label">手机号</label> 
           <div>

               <input type="text" placeholder="手机号" name="phone" id="phone"/>
           </div>

        </div>
        <div class="form-actions">
            <button id="getotp" class="btn blue" type="button">获取验证码</button>
        </div>
    </div>
</body>
<script>
$("document").ready(function(){
    $("#getotp").on('click',function () {
         if($("#phone").val()==null||$("#phone").val()==""){
             alert("手机号不能为空")
             //不可以冒泡往上传递
             return false
         }
         $.ajax({
             type:'POST',
             contentType:"application/x-www-form-urlencoded",
             url:"http://localhost:8090/longer/user/otp",
             data:{
                 "phone":$("#phone").val()
             },
            //允许跨域授信请求
             xhrFields:{withCredentials:true},
             success:function(data){
                 if(data.status==="success"){
                     alert("手机验证码已经发送到您的手机上,请注意查收")
                     window.location.href="./register.html"
                 }else{
                     alert("验证码发送失败,原因是"+data.data.errorMsg)
                 }
             },
             error:function(data){
                 alert("验证码发送失败"+data.responseText)
             }
         })
             //不可以冒泡往上传递
         return false
     })

})
</script>
</html>